export default function(page, $f7, $, $$) {

  
  var pageToComponent = page.el.__vue__;
  var pageFromComponent = (page.pageFrom) ? page.pageFrom.el.__vue__ : null;

  var pageInSecond = (pageToComponent.pageInSecond) ? pageToComponent.pageInSecond : 0.4;
  var pageOutSecond = (pageFromComponent && pageFromComponent.pageOutSecond) ? pageFromComponent.pageOutSecond : 0.4;
  var second = Math.max(pageInSecond, pageOutSecond);

  var scopeId = '';
  var animation = '';


  scopeId = pageToComponent.$options._scopeId;
  animation = (pageToComponent.pageInAnimation) ? '' : 'animation-name: no-animation-in-'+scopeId+';';
  $$('#page-to-style').remove();
  $$('head').append('<style id="page-to-style">' + 
  '@keyframes no-animation-in-'+scopeId+' { from {} to {} }' + 
  '.ios .router-transition-css-forward .page-next['+scopeId+'] { animation-duration: '+second+'s;'+animation+'}' +
  '.ios .router-transition-css-forward .page-next['+scopeId+']:before { animation-duration: '+second+'s;'+animation+'}' + 
  '.ios .router-transition-css-backward .page-previous['+scopeId+'] { animation-duration: '+second+'s;'+animation+'}' + 
  '.ios .router-transition-css-backward .page-previous['+scopeId+'] &:after { animation-duration: '+second+'s;'+animation+'}' + 
  '</style>');
  if (!pageToComponent.pageInAnimation) {
    $$('.page['+scopeId+']').css('opacity', 1);
  }


  if (pageFromComponent) {

    scopeId = pageFromComponent.$options._scopeId;
    animation = (pageFromComponent.pageOutAnimation) ? '' : 'animation-name: no-animation-out-'+scopeId+';';
    $$('#page-from-style').remove();
    $$('head').append('<style id="page-from-style">' + 
    '@keyframes no-animation-out-'+scopeId+' { from {} to {} }' + 
    '.ios .router-transition-css-forward .page-current['+scopeId+'] { animation-duration: '+second+'s;'+animation+'}' +
    '.ios .router-transition-css-forward .page-current['+scopeId+']:after { animation-duration: '+second+'s;'+animation+'}' +
    '.ios .router-transition-css-backward .page-current['+scopeId+'] { animation-duration: '+second+'s;'+animation+'}' +
    '.ios .router-transition-css-backward .page-current['+scopeId+']:before { animation-duration: '+second+'s;'+animation+'}' +
    '</style>');
    if (!pageFromComponent.pageOutAnimation) {
      $$('.page['+scopeId+']').css('opacity', 1);
    }

  }

}
